<template>
	<view class="content">
		<u-navbar leftText="" :is-back="false" safeAreaInsetTop placeholder>
			<view slot="left" class="leftText">消息</view>
		</u-navbar>
		<view class="topNav">
			<u-tabs :list="list2" :inactiveStyle="{color: '#A1A1A1', fontSize: '32rpx' }"
				:activeStyle="{ color: '#0F0F0F', fontSize: '36rpx' }" @click="tagTab()"></u-tabs>
			<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/shuaxin.png"></image>
			<view class="topNavTel" v-if="tel">
				<u-tabs :list="telMenu" lineColor="#fff" :inactiveStyle="{color: '#A1A1A1', fontSize: '28rpx' }"
					:activeStyle="{ color: '#0F0F0F', fontSize: '28rpx' }" @click="telTab()"></u-tabs>
			</view>
			<view class="topNavNotice" v-if="notice">
				<u-tabs :list="noticeMeu" lineColor="#fff" :inactiveStyle="{color: '#A1A1A1', fontSize: '28rpx' }"
					:activeStyle="{ color: '#0F0F0F', fontSize: '28rpx' }" @click="notTab()"></u-tabs>
			</view>
		</view>
		<view class="h-20"></view>
		<view class="userlist" v-if="user">
			<block scroll-y="true" v-if="sationlist && sationlist.length>0">
				<scroll-view @scrolltolower="">
					<view class="userListi" v-for="(item,index) in sationlist" :key="index"
						@click="navigator('/pagesB/hxIm/index?user='+item.user)">
						<view class="userIcon">
							<image mode="aspectFill"
								:src="item.avatar?item.avatar:'http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png'">
							</image>
							<view v-if="item.unread_num>0" class="tip"></view>
						</view>
						<view class="userName">
							<view>{{item.nickname?item.nickname:'先生'}}</view>
							<view>{{item.lastMessage.msg}}<text>{{times(item.lastMessage.time,'MM-dd')}}</text></view>
						</view>
					</view>
				</scroll-view>
			</block>
			<block v-else>
				<view class="empty-img">
					<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png"></image>
					<label>暂无内容</label>
				</view>
			</block>
		</view>
		<view class="telList" v-if="tel">
			<block v-if="phoneList && phoneList.length>0">
				<view v-for="(item,index) in phoneList" :key="index">
					<view class="telListi" v-if="item.isOrder==0">
						<view class="userName">
							{{item.nickName?item.nickName:'先生'}}<text>{{timeF(item.createTime,'MM-dd')}}</text></view>
						<view class="telTag">
							<view class="tag">
								<view v-for="(v,i) in item.skillsList" :key="i">{{v}}</view>
							</view>
							<view class="getTel" @click="getPhone(item)">获取号码</view>
							<view class="callTel" @click="callTel(item)">拨打电话</view>
						</view>
					</view>
					<view class="telListi" v-else>
						<view class="userName">{{item.nickName?item.nickName:'先生'}}
							<text>{{timeF(item.createTime,'MM-dd')}}</text></view>
						<view class="telTag">
							<view class="text">{{item.address}}招{{strHandle(item.skills)}}</view>
							<view class="callTel" @click="callTel(item)">拨打电话</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="empty-img">
					<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png"></image>
					<label>暂无内容</label>
				</view>
			</block>

		</view>
		<view class="noticelist" v-if="notice">
			<view v-if="noticeListi">
				<block v-if="followList && followList.length>0">
					<scroll-view>
						<view class="noticeListi" v-for="(item,index) in followList" :key="index">
							<view class="userIcon">
								<image mode="aspectFill"
									:src="item.avatar?item.avatar:'http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png'">
								</image>
								<view class="tip">个人</view>
							</view>
							<view class="userName">
								<view class="name">{{item.nickName?item.nickName:"先生"}}
									<block v-if="item.isRealName">
										<image
											src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/user-real.svg" />
										<view class="authMe" v-if="">已实名</view>
									</block>
									<view class="time">{{item.create_time}}</view>
								</view>
								<view class="tag">
									<view v-for="(v,i) in item.skill" :key="i">{{v}}</view>
								</view>
							</view>
						</view>

					</scroll-view>
				</block>
				<block v-else>
					<view class="empty-img">
						<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png"></image>
						<label>暂无内容</label>
					</view>
				</block>
			</view>

			<view class="beInterested" v-if="beInterested">
				<block v-if="InterestedList && InterestedList.length>0">
					<scroll-view>
						<view class="interList" v-for="(item,index) in InterestedList" :key="index"
							@click="navigator('/pagesB/messageInfo/lockMe3?orderId='+item.orderId)">
							<view class="title">
								<text v-if="item.status==9" class="t2">已结束</text>
								<text v-else>进行中</text>
								<view>{{item.cityArea}}{{item.address}}招{{item.skills}}</view>
							</view>
							<view class="addr">
								<view><u-icon name="map" color="#A1A1A1" size="13"></u-icon>
									{{item.cityArea}} · {{timeF(item.createTime,'MM-dd')}}
								</view>
								<view>对活感兴趣<text>{{item.count}}</text>人</view>
							</view>
						</view>
					</scroll-view>
				</block>
				<block v-else>
					<view class="empty-img">
						<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png"></image>
						<label>暂无内容</label>
					</view>
				</block>
			</view>

			<view class="lockMe" v-if="lockMe">
				<block v-if="lockMeList && InterestedList.length>0">
					<scroll-view>
						<view class="lockMeMp" v-if="lockMeList.businessCard"
							@click="navigator('/pagesB/messageInfo/lockMe')">
							<view class="list">
								<view class="master-faceItem poser dis-row">
									<!--头像处理start-->
									<view class="faceItem-ico">
										<image
											:src="lockMeList.businessCard.avatar?lockMeList.businessCard.avatar:'http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png'">
										</image>
									</view>
									<!--头像处理over-->
									<!--顶部右侧标题文字开始-->
									<view class="faceText dis-clm">
										<!--置顶信息start-->
										<view class="faceText-t1 dis-row">
											<view class="master-name">
												{{lockMeList.businessCard.nickName?lockMeList.businessCard.nickName:'先生'}}
											</view>
											<block v-if="lockMeList.businessCard.isRealName">
												<label>
													<image
														src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/user-real.svg">
													</image>
												</label>
												<text>实名认证</text>
											</block>
										</view>
										<!--置顶信息over-->
										<view class="master-userinfo dis-row">
											<text v-for="(v,k) in lockMeList.businessCard.skillsList"
												:key="i">{{v}}</text>
										</view>
									</view>
									<!--顶部右侧标题文字结束-->
									<!--是否在线开始-->
									<view class="const-an" v-if="lockMeList.businessCard.status!==''">
										<text v-if="lockMeList.businessCard.status==0">找活中</text>
										<text v-if="lockMeList.businessCard.status==1">暂不找活</text>
										<text v-if="lockMeList.businessCard.status==2">有活预定下一个</text>
									</view>
									<!--是否在线结束-->
								</view>
								<view class="mpBottom">
									<view>个人名片</view>
									<view>被查看<text>{{lockMeList.businessCard.count}}</text>次</view>
								</view>
							</view>
						</view>
						<view class="lockMeList" v-for="(item,index) in lockMeList.easyToLive" :key="index"
							@click="navigator('/pagesB/messageInfo/lockMe2?orderId='+item.orderId)">
							<view class="title">
								<text v-if="item.status==9" class="t2">已结束</text>
								<text v-else>进行中</text>
								<view>{{item.cityArea}}{{item.address}}招{{item.skills}}</view>
							</view>
							<view class="addr">
								<view><u-icon name="map" color="#A1A1A1" size="13"></u-icon>
									{{item.cityArea}} · {{timeF(item.createTime,'MM-dd')}}
								</view>
								<view>被查看<text>{{item.count}}</text>次</view>
							</view>
						</view>

					</scroll-view>
				</block>
				<block v-else>
					<view class="empty-img">
						<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png"></image>
						<label>暂无内容</label>
					</view>
				</block>
			</view>

			<view class="message" v-if="message">
				<block v-if="sysNoticeList && sysNoticeList.length>0">
					<scroll-view>
						<view class="messageList" v-for="(item,index) in sysNoticeList" :key="index"
							@click="msgInfo(item)">
							<view class="mesIcon">
								<image mode="aspectFill"
									src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/message1.svg"></image>
							</view>
							<view class="mesCon">
								<view class="title">{{item.title}}<text>{{item.createTime}}</text></view>
								<view class="con">{{item.contents}}</view>
							</view>
						</view>
					</scroll-view>
				</block>
				<block v-else>
					<view class="empty-img">
						<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png"></image>
						<label>暂无内容</label>
					</view>
				</block>
			</view>
		</view>
		<uTabbar :value="2"></uTabbar>
	</view>
</template>
<script>
	import uTabbar from "@/components/uTabbar/uTabbar.vue";
	import store from '@/common/store.js'
	import Index from '@/common/index-model.js'
	import fun from '@/common/publicFun.js'
	let disp = require("../../utils/broadcast");
	let index = new Index();
	let that = null;
	export default {
		components: {
			uTabbar,
		},
		data() {
			return {
				// user: true,
				tel: true,
				notice: false,
				noticeListi: true,
				lockMe: false,
				message: false,
				beInterested: false,
				list2: [{
					name: '电话',
				}, {
					name: '通知',
					// badge: {
					// 	value: 12,
					// }
				}],
				telMenu: [{
					name: '全部'
				}, {
					name: '联系我的',
				}, {
					name: '我联系的',
				}],
				noticeMeu: [{
					name: '通知',
				}],
				sationlist: [],
				phoneList: [],
				phoneType: 0,
				followList: [],
				InterestedList: [],
				lockMeList: [],
				sysNoticeList: [],
				time: fun.formatDate(new Date, "yyyy-MM-dd hh:mm:ss")
			}
		},
		onLoad(opt) {
			this.getUserInfo();
			uni.hideTabBar();
		},
		onPullDownRefresh() {
			this.time = fun.formatDate(new Date, "yyyy-MM-dd hh:mm:ss");
			if (this.user == true) {
				this.getUserList();
			} else if (this.tel == true) {
				this.getInventedPhone();
			} else if (this.notice == true && this.noticeListi == true) {
				this.getFollowwithInterest();
			} else if (this.notice == true && this.lockMe == true) {
				this.getLockMe();
			} else if (this.notice == true && this.message == true) {
				this.getNoticeList();
			} else if (this.notice == true && this.beInterested == true) {
				this.getInterestedList();
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			msgInfo(item) {
				index.navigate_to('/pagesB/messageInfo/index?id=' + item.id);
			},
			getUserInfo() {
				if (uni.getStorageSync('token')) {
					index.getPublicUserMember({}, '/client/individual/homePage', 'get', res => {
						if (res.data.code == 200 && res.data.success) {
							this.userinfo = res.data.result;
						} else if (res.data.code == '401') {
							uni.removeStorageSync('');
							index.navigate_to('../../pagesC/login/login');
						} else {
							index.show_tips(res.data.message);
							return false
						}
					})
				}
			},
			getPhone(item) {
				index.getPublicUserMember({}, "/client/individual/mobile/show?userId=" + item.userId, 'get', res => {
					if (res.data.code == 200) {
						uni.showModal({
							title: '系统提示',
							content: res.data.result,
							showCancel: true,
							cancelText: '取消',
							success: function(res) {}
						});
					}
				})
			},
			getNoticeList() { //查询通知消息
				let url = "/client/message/find/notice"
				index.getPublicUserMember({}, url, 'get', res => {
					if (res.data.code == 200) {
						this.sysNoticeList = res.data.result;
					}
				})
			},
			getLockMe() { //查询看过我
				let url = "/client/message/have/seen/me"
				index.getPublicUserMember({}, url, 'get', res => {
					if (res.data.code == 200) {
						let data = res.data.result;
						if (data.businessCard && data.businessCard.skills) {
							data.businessCard.skillsList = index.strTrim(data.businessCard.skills, ',').split(',');
						}
						console.log(data.length);
						this.lockMeList = data;
					}
				})
			},
			getInterestedList() { //查看感兴趣的
				let url = "/client/message/interested/in"
				index.getPublicUserMember({}, url, 'get', res => {
					if (res.data.code == 200) {
						this.InterestedList = res.data.result;
					}
				})
			},
			getFollowwithInterest(date) { //获取关注我的列表
				let url = "/client/message/follow/me",
					param, skills, list = [];
				index.getPublicUserMember({
					time: this.time
				}, url, 'POST', res => {
					if (res.data.code == 200) {
						let data = res.data.result;
						data.forEach((item, index) => {
							skills = item.skills.split(',');
							skills = skills.filter((s) => {
								return s && s.trim();
							})
							item.skill = skills;
							list.push(item);
						})
						this.followList = list;
					}
				})
			},
			callTel(item) {
				let url = "/secret/call/secretNumber";
				let param;
				if (item.isOrder == 1 && item.orderId) {
					param = {
						orderId: item.orderId
					};
				} else {
					param = {
						targetId: item.userId
					};
				}
				index.getPublicUserMember(param, url, 'POST', res => {
					if (res.data.code == 200) {
						uni.makePhoneCall({
							phoneNumber: res.data.result
						});
					} else if (res.data.code == 100017) {
						index.show_tips('请完善您的个人信息')
						setTimeout(() => {
							index.navigate_to('/pagesC/my/MyEditUserInfo');
						}, 2000)
					}
				})
			},
			getInventedPhone() {
				let url = "/client/contact/phone/list"
				let phoneList = [];
				index.getPublicUserMember({
					type: this.phoneType
				}, url, 'get', res => {
					if (res.data.code == 200) {
						res.data.result.forEach((item, ind) => {
							item.skillsList = index.strTrim(item.skills, ',').split(',');
							phoneList.push(item);
						})
						this.phoneList = phoneList;
					}
				})
			},
			getUserList() {
				this.$WebIM.conn.getConversationlist({
					pageNum: 1,
					pageSize: 999
				}).then((res) => {

					console.log(res, '这里获取的是聊天列表');
					let sation = res.data.channel_infos;
					let user = [],
						userlist = [],
						suser;
					//this.sationlist=sation;
					sation.forEach((item, i) => {
						if (item.lastMessage.from === uni.getStorageSync('hxuser')) {
							user.push(item.lastMessage.to);
						} else {
							user.push(item.lastMessage.from);
						}
					})
					console.log(user);
					index.getPublicUserMember(user, "/client/public/query/user", 'post', resc => {
						console.log(resc, '这里匹配服务器用户数据');
						userlist = resc.data.result;
						let sationlist = [];
						this.$nextTick(() => {
							sation.forEach((item, i) => {
								if (item.lastMessage.from == uni.getStorageSync(
									'hxuser')) {
									suser = item.lastMessage.to
								} else {
									suser = item.lastMessage.from
								}
								const suser2 = userlist.filter(
									(item) => item.hx_name == suser
								);
								if (suser2[0]) {
									item.avatar = suser2[0].avatar;
									item.nickname = suser2[0].nick_name;
									item.user = suser;
									sationlist.push(item);
								}
							})
							this.sationlist = sationlist;
						})
					})

				})
			},
			tagTab(e) {
				console.log('点击了切换', e)
				// if(e.index==0){
				// 	this.user=true;
				// 	this.tel=false;
				// 	this.notice=false;
				// 	this.getUserList();
				// }else 
				if (e.index == 0) {
					this.tel = true;
					this.user = false;
					this.notice = false;
					this.getInventedPhone();
				} else if (e.index == 1) {
					this.notice = true;
					this.user = false;
					this.tel = false;
					// this.getFollowwithInterest();
					this.getNoticeList();
				}
			},
			telTab(e) {
				if (e.index == 0) {
					this.phoneType = 0;
					this.getInventedPhone();
				} else if (e.index == 1) {
					this.phoneType = 2;
					this.getInventedPhone();
				} else if (e.index == 2) {
					this.phoneType = 1;
					this.getInventedPhone();
				}
			},
			notTab(e) {
				// if(e.index==0){
				// 	this.noticeListi=true;
				// 	this.lockMe=false;
				// 	this.message=false;
				// 	this.beInterested=false;
				// 	this.getFollowwithInterest();
				// }else if(e.index==1){
				// 	this.noticeListi=false;
				// 	this.lockMe=false;
				// 	this.message=false;
				// 	this.beInterested=true;
				// 	this.getInterestedList();
				// }else if(e.index==2){
				// 	this.noticeListi=false;
				// 	this.lockMe=true;
				// 	this.message=false;
				// 	this.beInterested=false;
				// 	this.getLockMe();
				// }else if(e.index==3){
				this.noticeListi = true;
				this.lockMe = false;
				this.message = false;
				this.beInterested = false;
				this.getNoticeList();
				// }
			},

			navigator(url) {
				index.navigate_to(url);
			},
			times(time, char) {
				return fun.formatDate(time, char);
			},
			timeF(time, char) {
				let d = new Date(time);
				let t = d.getTime(d) // 方法1
				return fun.formatDate(t, char);
			},
			strHandle(str, char = ',') {
				str = index.strTrim(str, char);
				return index.strRep(str, ',', "、");
			}
		},
		onShow() {
			this.getUserList();
			disp.on("em.invite.againLogin", (res) => {
				if (res.access_token) {
					this.getUserList();
				}
			})
			disp.on("em.unreadspot", (res) => {

				const user = this.sationlist.filter(
					(item) => item.user == res.from
				);

				if (!user[0]) {
					index.getPublicUserMember([res.from], "/client/public/query/user", 'post', resc => {
						let sation = {},
							lastMessage = {};
						if (resc.data.code == 200) {
							sation.avatar = resc.data.result[0].avatar;
							sation.nickname = resc.data.result[0].nick_name;
							sation.unread_num = 1
							sation.user = res.from;
							lastMessage.type = 'txt';
							lastMessage.msg = res.data;
							lastMessage.time = parseInt(res.time);
							lastMessage.id = res.id;
							lastMessage.chatType = "chat";
							sation.lastMessage = lastMessage;
							this.sationlist.unshift(sation);
						}
					})
				}
				this.sationlist.forEach((item, i) => {
					if (item.user == res.from) {
						this.sationlist[i].lastMessage.msg = res.data;
						this.sationlist[i].unread_num = item.unread_num + 1;
						this.sationlist[i].lastMessage.time = parseInt(res.time);
					}
				})
			})
		},
		onShareAppMessage(res) {

		},
	}
</script>

<style lang="scss" scoped>
	@import url("index.css");
	@import url("@/static/css/publics.css");

	.u-badge.data-v-13728ffe {
		border-top-right-radius: 100px;
		border-top-left-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		display: flex;
		flex-direction: row;
		line-height: 11px;
		text-align: center;
		font-size: 11px;
		color: #FFFFFF;
		margin-top: -30rpx;
	}

	::v-deep {
		.u-navbar--fixed {
			background: #fff;
			font-size: 36rpx;

			&>view {
				background: transparent !important;

			}

			.leftText {
				color: #000;
				font-size: 36rpx;
				font-weight: bold;
			}

			.search {
				margin-left: 10px;
				border: 1px solid #E4F0FF;
				margin-right: 180rpx;
				display: flex;
				justify-content: right;
				color: #3D3D3D;
				font-size: 24rpx;
				border-radius: 48rpx;
				width: 160rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
			}

			.search image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-top: 8rpx;
			}
		}
	}
</style>